// Import React
import React from 'react';

// Import Spectacle Core tags
import {
  BlockQuote,
  Cite,
  Deck,
  Heading,
  Image,
  List,
  ListItem,
  Notes,
  Quote,
  Slide,
  Text,
  Link
} from 'spectacle';

// Import theme
import createTheme from 'spectacle/lib/themes/default';

const images = {
  formidagon: require('../assets/formidable-logo.svg'),
  goodWork: require('../assets/good-work.gif'),
  pcSample: require('../assets/pc-sample.png'),
  h5Sample: require('../assets/h5-sample.png'),
  v1Sample: require('../assets/v1-sample.png'),
  v1Carbon: require('../assets/v1carbon.png'),
  currentCarbon: require('../assets/current-carbon.png'),
  currentSample: require('../assets/current-sample.png'),
};

// Require CSS
require('normalize.css');

const theme = createTheme(
  {
    primary: 'white',
    secondary: '#1F2022',
    tertiary: '#03A9FC',
    quaternary: '#CECECE'
  },
  {
    primary: 'Montserrat',
    secondary: 'Helvetica'
  }
);

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck
        transition={['zoom', 'slide']}
        transitionDuration={500}
        theme={theme}
      >
        <Slide transition={['zoom']} bgColor="primary">
          <Heading size={1} fit caps lineHeight={1} textColor="secondary">
            从零开始搭建一个基于nodejs的本地静态文件服务器
          </Heading>
        </Slide>

        <Slide bgColor="secondary">
          <Image src={images.v1Sample} width={800} />
        </Slide>

        <Slide bgColor="secondary">
          <Image src={images.pcSample} width={800} />
        </Slide>

        <Slide transition={['fade']} bgColor="tertiary">
          <Heading size={5} textColor="primary" caps>
            使用的技术
          </Heading>
          <Text size={6} textColor="secondary">
            原生 nodejs
          </Text>
          <Text size={6} textColor="secondary">
            第三方 lib mime-types
          </Text>
        </Slide>
        <Slide transition={['fade']} bgColor="primary" textColor="tertiary">
          <Heading size={6} textColor="secondary" caps>
            第一版：simple version
          </Heading>
          <Image src={images.v1Sample} width={600} />
        </Slide>

        <Slide transition={['fade']} bgColor="primary" textColor="tertiary">
          <Heading size={6} textColor="secondary" caps>
            优雅版本实现
          </Heading>
          <Image src={images.pcSample} width={650} />
        </Slide>

        <Slide transition={['fade']} bgColor="primary" textColor="tertiary">
          <Heading size={6} textColor="secondary" caps>
            优雅版本
          </Heading>
          <Image src={images.currentSample} width={650} />
        </Slide>

        <Slide transition={['fade']} bgColor="primary" textColor="tertiary">
          <Heading size={6} textColor="secondary" caps>
           <Link target="_blank" href="http://localhost:8800">实现预览</Link>
          </Heading>
        </Slide>

        <Slide transition={['fade']} bgColor="primary" textColor="tertiary">
          <Heading size={6} textColor="secondary" caps>
            Q/A
          </Heading>
        </Slide>

        <Slide transition={['fade']} bgColor="primary" textColor="tertiary">
          <Heading size={6} textColor="secondary" caps>
            特别鸣谢 @映杰 🎉
          </Heading>
        </Slide>

        <Slide transition={['fade']} bgColor="primary" textColor="tertiary">
          <Heading size={6} textColor="secondary" caps>
            Thank You
          </Heading>
        </Slide>

      </Deck>
    );
  }
}
